<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding:0; margin:0;}
        .teacher{
            width:1102px; height:418px;
            background: pink;
        }
        .title{
            width:1102px; height:62px;
            border-bottom: solid 1px #dcdcdc;
            background: #ccc;
            padding-top: 18px;    
            line-height: 62px;    
        }
        .title h3{
            float:left;
            font-weight: normal;
        }
        .title a{
            float:right;
        }
        .teacher dl{
            width:238px; height:272px;
            background: #eff3f6;
            padding: 18px 12px 0;
            /* 12+12=24px */
            float:left;
            margin-left:16px;
        }
       .teacher .ml0{
            margin-left:0;
        }
        .teacher dd{
            border-top: solid 1px #d5d9dc;
        }
        img{
            vertical-align: top;
        }
        .teacher dt h4{
            line-height:35px;
            font-weight: normal;
            padding-top: 6px;
        }
        .teacher dt p{
            width:142px; height:26px;
            color: #fff;
            text-align: center;
            font-size:12px;
            background: #60a6ff;
            line-height: 26px;
            margin:0 auto;
        }
        .teacher dd p{
            line-height: 24px; font-size:12px;
            padding-top: 11px;
        }
        .teacher dt{
            width:238px;
            text-align: center;
        }

        /* 
            会换行的标签，如果没有写宽，那么它的宽是它父元素的宽
            不会换行的标签，如果没有写宽，那它的宽就是内容撑开的宽
        */
    </style>
</head>
<body>
    <div class="teacher">
        <div class="title">
            <h3>名师面授</h3>
            <a href="#">名师面授名师面授名师面授</a>
        </div>
        <dl class="ml0">
            <dt>
                <img src="images/luo.jpg" alt="">
                <h4>罗老师</h4>
                <p>原中科院专家</p>
            </dt>
            <dd>
                <p>原中科院专家原中科院专家原中科院专家原中科院专家</p>
            </dd>
        </dl>
        <dl>
            <dt>
                <img src="images/luo.jpg" alt="">
                <h4>罗老师</h4>
                <p>原中科院专家</p>
            </dt>
            <dd>
                <p>原中科院专家原中科院专家原中科院专家原中科院专家</p>
            </dd>
        </dl>
        <dl>
            <dt>
                <img src="images/luo.jpg" alt="">
                <h4>罗老师</h4>
                <p>原中科院专家</p>
            </dt>
            <dd>
                <p>原中科院专家原中科院专家原中科院专家原中科院专家</p>
            </dd>
        </dl>
        <dl>
            <dt>
                <img src="images/luo.jpg" alt="">
                <h4>罗老师</h4>
                <p>原中科院专家</p>
            </dt>
            <dd>
                <p>原中科院专家原中科院专家原中科院专家原中科院专家</p>
            </dd>
        </dl>
    </div>
</body>
</html>